<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useAppStore } from '../stores/app'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { availableLocales, type Locale } from '../i18n'
import { useSettingsStore } from '../stores/settings'
import TopMenu from './TopMenu.vue'

const appStore = useAppStore()
const router = useRouter()
const { t } = useI18n()
const settingsStore = useSettingsStore()

// Call initTheme on mount
onMounted(() => {
  appStore.init()
  settingsStore.initSettings()
})

// 处理顶部菜单的事件
const handleCreateNotebook = () => {
  // 发送通知到Home.vue或其他相关组件
  window.dispatchEvent(new CustomEvent('create-notebook'))
}

const handleCreateNote = () => {
  window.dispatchEvent(new CustomEvent('create-note'))
}

const handleToggleSearch = () => {
  window.dispatchEvent(new CustomEvent('toggle-search'))
}

const handleImportData = () => {
  window.dispatchEvent(new CustomEvent('import-data'))
}

const handleExportData = () => {
  window.dispatchEvent(new CustomEvent('export-data'))
}

const handlePrintNote = () => {
  window.dispatchEvent(new CustomEvent('print-note'))
}

const handleRefreshApp = () => {
  window.location.reload()
}
</script>

<template>
  <div class="app-layout">
    <!-- 顶部菜单 -->
    <TopMenu 
      @create-notebook="handleCreateNotebook"
      @create-note="handleCreateNote"
      @toggle-search="handleToggleSearch"
      @import-data="handleImportData"
      @export-data="handleExportData"
      @print-note="handlePrintNote"
      @refresh-app="handleRefreshApp"
    />
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <slot></slot>
    </div>
  </div>
</template>

<style>
/* 全局样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-placeholder);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #555;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #777;
}
</style>

<style scoped>
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px); /* 减去顶部菜单的高度 */
}
</style> 